<template> <!-- PK准备页面 -->
	<view class="wrap" v-if="!isLoading">
		<view class="layout-position">
			<!-- 背景音乐 -->
			<view class="layout-music flex justify-end">
				<view class="text m-right-30">背景音乐</view>
				<u-switch v-model="switchValue" size="32" @change="musicDo"></u-switch>
				<!-- activeColor="#4395f9" -->
			</view>
			<!-- 双方 -->
			<view class="layout-vs flex justify-between align-center m-top-30">
				<view class="user">
					<view class="hd hd-1">
						<avatar-image :url="user_left.avatar_url" :width="120" />
					</view>
					<view class="number number-1 flex justify-center align-center">
						<!-- <text class="sm m-right-10">(+10)</text> -->
						<!-- <image class="icon m-right-10" src="/static/image/bei.png" mode=""></image> -->
						<!-- <text class="da">820</text> -->
					</view>
					<view class="name name-1 flex justify-center align-center">
						<view class="text-single">{{user_left.nick_name}}</view>
					</view>
				</view>
				<view class="vs">
					<image class="full" src="/static/image/vs.png" mode=""></image>
				</view>
				<view class="user">
					<view class="hd hd-2">
						<avatar-image :url="user_right.avatar_url" :width="120" />
					</view>
					<view class="number number-2 flex justify-center align-center">
						<!-- <image class="icon m-right-10" src="/static/image/bei.png" mode=""></image> -->
						<!-- <text class="da">10</text> -->
						<!-- <text class="sm m-left-10">(+10)</text> -->
					</view>
					<view class="name name-2 flex justify-center align-center">
						<view class="text-single" v-if="user_right.nick_name">{{user_right.nick_name}}</view>
							<view class="text-single" v-else>神秘好友</view>
					</view>
				</view>
			</view>
			<!-- 邀请、加入、等待 -->
			<view class="layout-wait">
				<!-- 邀请按钮 -->

				<button class="share-btn" open-type="share" v-if="isRole == 0">
					邀请好友
				</button>
				<!-- 加入按钮 -->
				<u-button v-if="isRole == 1" :custom-style="resultBtn" shape="circle"
					@click="handJoin(2)">加入房间</u-button>

				<!-- 开始按钮 -->
				<u-button v-if="isRole == 2" :custom-style="resultBtn" shape="circle" @click="handRoom">开始对战</u-button>
				<u-button v-if="isRole == 3" :custom-style="resultBtn" shape="circle">等待开始</u-button>
			</view>
		</view>
		<!-- 右下角背景图 -->
		<view class="hi">
			<image class="full" src="/static/image/hi.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	import AvatarImage from '@/components/avatar-image'
	import * as GamePkApi from '@/api/dati/pk'
	import * as UserApi from '@/api/user'
	export default {
		components: {

			AvatarImage
		},
		data() {
			return {
				isLoading:true,
				resultBtn: {
					color: '#ffffff',
					background: '#0197F8',
				},
				src: 'https://cdn.uviewui.com/uview/album/1.jpg',
				switchValue: true,
				isPopup: false,
				isRole: 0, // 邀请-0、加入-1、开始-2、进行中-3
				gameId: 0,
				game_info: {},
				user_left: {},
				user_right: {},
				timer: null,
				is_play:true,
				audio:null,
				audio_url:''

			};
		},
		onUnload() {
			console.log(45)
			clearInterval(this.timer);
			if(this.audio){
				this.audio.stop();
			}
			
		},
		onLoad(options) {
		
			this.getUserInfo()
			if (options.isRole == 0) {
				this.addPk()
			}
			if (options.gameId) {
				this.getGameInfo(options.gameId, options.isRole)
			}
			this.gameId = options.gameId
			this.isRole = options.isRole


		},
		methods: {
			
			musicDo(e){
				console.log(e)
				if(e==false){
				this.audio.stop();
				}else{
					if(!this.audio){
						var audio_url=this.audio_url
						this.skvido(audio_url)
					}else{
							this.audio.play();
					}
				
				}
			},
			
			getUserInfo() {
				UserApi.info()
					.then(result => {
						this.userInfo = result.data.userInfo
						this.audio_url=result.data.userInfo.audio_url
			
						if (result.data.userInfo.is_music) {
							this.skvido(result.data.userInfo.audio_url)
							this.switchValue = true
			
						} else {
							this.switchValue = false
						}
						this.isLoading=false
			
			
					})
			},
			skvido(audio_url) {
			
				console.log(556)
				// 创建音频对象
				this.audio = uni.createInnerAudioContext();
			
			
			
				// 设置音频源
				//this.audio.src = 'https://safe.gxgyl.com/uploads/bg.mp3';
					this.audio.src =audio_url;
			
			
			
				// 播放音频
				this.audio.play();
				this.is_play = true
			
				// 监听音频播放完成事件
				this.audio.onEnded(() => {
					//this.is_play = false
					this.skvido(audio_url)
					console.log('音频播放完成');
				});
			
				// 监听音频播放错误事件
				this.audio.onError((err) => {
					console.log('音频播放错误', err);
				});
				return
				let _this = this;
				plugin.textToSpeech({
					lang: "zh_CN",
					tts: true,
					content: _this.timu_title,
					success: function(res) {
						console.log("succ tts", res.filename)
			
						let music = null;
						music = uni.createInnerAudioContext(); //创建播放器对象
						music.src = res.filename;
						music.play(); //执行播放
						music.onEnded(() => {
			
							//播放结束
							//_this.is_play = false
							//music = null;
						});
					},
					fail: function(res) {
						// console.log("fail tts", res)
					}
				})
			},
			
			

			//邀请后的倒计时
			handInit0(gameId) {
				const that = this

				// 开始倒计时
				this.countdown = 60;
				this.timer = setInterval(() => {
					this.countdown--;
					console.log(this.countdown)

					GamePkApi.game_info({
						gameId: gameId,
						role: 0
					}).then(result => {
						if (result.data.game.is_join == 1) {

							this.user_right = result.data.game.user_right

							console.log('成功')
							clearInterval(this.timer);
							this.isRole = 2
							this.gameId = gameId

						}
						
					})
					if (this.countdown === 0) {
						uni.showToast({
							title: '游戏开始失败',
							icon: 'none'
						})
						uni.reLaunch({
							url: '/pages/index/index'
						})

					}
				}, 1000);


			},

			handInit() {
				const that = this

				// 开始倒计时
				this.countdown = 60;
				this.timer = setInterval(() => {
					this.countdown--;
					console.log(this.countdown)

					GamePkApi.game_info({
						gameId: this.gameId,
						role: 3
					}).then(result => {
						if (result.data.game.is_start == 1) {

							console.log('成功')
							clearInterval(this.timer);

							that.$u.route({
								url: 'pagesNew/pk/room?gameId=' + result.data.game.game_id,
								type: 'redirectTo',
							})
						}
					})
					if (this.countdown === 0) {
						uni.showToast({
							title: '游戏开始失败',
							icon: 'none'
						})
						uni.reLaunch({
							url: '/pages/index/index'
						})

					}
				}, 1000);


			},

			getGameInfo(gameId, role) {
				GamePkApi.game_info({
						gameId: gameId,
						role: role
					})
					.then(result => {
						this.game_info = result.data.game
						this.user_left = result.data.game.user_left
						this.user_right = result.data.game.user_right
						this.isLoading = false

					})
			},
			addPk() {
				GamePkApi.add({})
					.then(result => {
						this.gameId = result.data.data.game_id
						this.user_left = result.data.data.user_left
						this.handInit0(this.gameId)

					})
			},
			handJoin(role) {
				GamePkApi.join({
						game_id: this.gameId
					})
					.then(result => {
						this.isRole = 3

						this.handInit()

					})
			},
			// 模拟角色
			handRole(role) {
				this.isRole = role
			},
			handRoom() {

				//产生题目

				GamePkApi.add_tiku({
						game_id: this.gameId
					})
					.then(result => {
						uni.redirectTo({
							url: '/pagesNew/pk/room?gameId=' + this.gameId
						})

					})

			},
			/**
			 * 分享当前页面
			 */
			onShareAppMessage() {
				const app = this
				// 构建页面参数
				const params = app.$getShareUrlParams({
					gameId: app.gameId,
					isRole: 1
				});
				return {
					title: '我也要玩',
					path: "/pagesNew/pk/wait?" + params
				}
			},
		},

	}
</script>

<style lang="scss">
	.share-btn {
		background-color: #0197F8;
		color: #FFF;
		border-radius: 50rpx;

	}

	.hi {
		position: fixed;
		right: 0;
		bottom: 100rpx;
		z-index: 1;
		width: 500rpx;
		height: 372rpx;
	}

	.layout-position {
		position: relative;
		z-index: 99;
	}

	.layout-music {
		padding: 20rpx 36rpx;

		.text {
			font-size: 36rpx;
			line-height: 38rpx;
			color: #101010;
		}
	}

	.layout-vs {
		position: relative;

		.vs {
			position: absolute;
			left: 50%;
			bottom: 0;
			z-index: 1;
			transform: translateX(-50%);
			width: 120rpx;
			height: 100rpx;
		}
	}

	.user {
		position: relative;
		width: 300rpx;
		height: 172rpx;
		padding-top: 10rpx;

		.hd {
			position: absolute;
			top: 0;
			z-index: 10;
			width: 120rpx;
			height: 120rpx;
		}
	}

	.name {
		width: 100%;
		height: 100rpx;
		box-sizing: border-box;
		font-size: 32rpx;
		line-height: 40rpx;
		color: #fff;
	}

	.hd-1 {
		right: -20rpx;
	}

	.hd-2 {
		left: -20rpx;
	}

	.name-1 {
		padding: 0 40rpx 0 36rpx;
		background: url('~@/static/image/name-1.png') center no-repeat;
		background-size: 100% 100%;
	}

	.name-2 {
		padding: 0 36rpx 0 40rpx;
		background: url('~@/static/image/name-2.png') center no-repeat;
		background-size: 100% 100%;
	}

	.number {
		width: 100%;
		height: 72rpx;
		box-sizing: border-box;

		.icon {
			width: 60rpx;
			height: 60rpx;
		}
	}

	.number-1 {
		padding-right: 100rpx;
	}

	.number-2 {
		padding-left: 100rpx;
	}

	.sm {
		margin-top: -6rpx;
		font-size: 32rpx;
		font-weight: 600;
		line-height: 1;
		color: #FC2A2A;
	}

	.da {
		font-size: 40rpx;
		font-weight: 600;
		line-height: 1;
		color: #FC2A2A;
	}

	.layout-wait {
		margin: 280rpx auto 0;
		width: 580rpx;
	}

	.result-btn {
		margin: 0 auto;
		width: 580rpx;
		height: 80rpx;
		font-size: 36rpx;
		font-weight: 600;
		line-height: 80rpx;
		text-align: center;
		color: #fff;
		background: #0197F8;
		border-radius: 40rpx;
		border: none;
	}

	.tr {
		padding: 8rpx 0;
	}
</style>